<template>
	<div class="main_spac1 maincl">
		<div class="main_white padding10">
			<div class="mainor_form">
				<el-form
					:inline="true"
					:model="form"
					class="demo-form-inline"
					ref="searchForm"
					label-width="80px"
				>
					<el-form-item label="单据类型">
						<el-select v-model="form.type"  placeholder="请选择" clearable>
								<el-option
								v-for="(val,key) in typeList"
								:key="key"
								:label="val"
								:value="key"
								>
								</el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="单据号">
						<el-input
							v-model.trim="form.order_sn"
							placeholder="单据号"
							clearable
						></el-input>
					</el-form-item>

					<el-form-item label="客户">
						<el-autocomplete
							v-model="form.company_name"
							:fetch-suggestions="queryCustoms"
							value-name=""
							placeholder="请输入客户"
							@select="selectCustom"
						>
							<template slot-scope="{ item }">
								<div>{{ item.company_name }}</div>
							</template>
						</el-autocomplete>
					</el-form-item>

					<el-form-item label="创建时间">
						<el-date-picker
						v-model="form.create_at"
						value-format="timestamp"
						type="daterange"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						>
						</el-date-picker>
					</el-form-item>
					<div class="clearfix"></div>
					<el-form-item class="marginTop10">
						<el-button
							class="reset marginLeft10"
							type="primary"
							@click="reset()"
							>重置</el-button
						>
						<el-button
							type="primary"
							@click="searchAction"
							:loading="listLoading"
							>搜索</el-button
						>
					</el-form-item>
				</el-form>
			</div>

			<div class="main_table" style="min-height: 590px">
				<el-table
					ref="multipleTable"
					v-loading="listLoading"
					:data="list"
					element-loading-text="加载中"
					fit
					border
					highlight-current-row
				>
					<!-- <el-table-column type="selection" /> -->
					<!-- <el-table-column prop="id" label="ID" width="80" /> -->
                    <el-table-column label="客户" width="100" prop="company.company_name" :show-overflow-tooltip="true" />
                    <el-table-column label="单据号"  prop="order_sn" :show-overflow-tooltip="true" />
					<el-table-column label="单据类型" prop="type" :show-overflow-tooltip="true" >
						<template slot-scope="scope">
							<span :style="{color:setColor(scope.row.type)}">
								{{typeList[scope.row.type]}}
							</span>
						</template>
					</el-table-column>
					<el-table-column prop="order_money" label="应付" :show-overflow-tooltip="true"/>
					<el-table-column prop="balance" label="差额" :show-overflow-tooltip="true"/>
					<el-table-column prop="real_money" label="实付" :show-overflow-tooltip="true"/>
					<el-table-column prop="commission_rate" label="佣金比例" :show-overflow-tooltip="true"/>
					<el-table-column prop="commission_money" label="佣金金额" :show-overflow-tooltip="true"/>
					<el-table-column label="创建时间" :show-overflow-tooltip="true" >
						<template slot-scope="scope">
                            {{parseTime(scope.row.updated_at)}}
                        </template>
					</el-table-column>

				</el-table>
			</div>
			<div class="main_page boxdq">
				<div></div>
				<!-- 分页 -->
				<div class="main_page_r">
					<el-pagination
						:current-page="current.page"
						:page-sizes="[20, 30, 50, 100]"
						:page-size="limit"
						layout="total, sizes, prev, pager, next, jumper"
						:total="totalCount"
						background
						@size-change="changeLimit"
						@current-change="changePage"
					/>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { commissionList,getCompanyListByName} from "@/api/brokerage/online";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { parseTime } from "@/utils/index";

export default {
	data() {
		return {
			// 时间
			parseTime,
			// 分页
			current: {
				page: 1,
				size: 20,
			},
			limit: 20,
			totalCount: 1,
			// 搜索
			form: {},
			// 列表数据
			list: [],
			listLoading: false,
            typeList:{},
		};
	},
	mounted() {
		this.getData();
	},
	methods: {
        // 获取列表
        getData() {
            this.listLoading = true;
            var search = this.list_form();
            let data = Object.assign(
                search,
                this.current
            );
            commissionList(data).then((res) => {
                this.listLoading = false;
                if (res.errcode == 0) {
                    this.typeList = res.data.type_list;
                    this.list = res.data.list.data;
                    this.totalCount = res.data.list.total;
                } else {
                    this.$message.error(res.errmsg);
                }
            });
        },
		  //搜索客户列表
			queryCustoms(str,callback){
				let params = {company_name:str,model:2};
				getCompanyListByName(params).then((res) => {
					if (res.errcode == 0) {
						callback(res.data.list)
					} else {
						this.$message.error(res.errmsg);
					}
				});
			},
			list_form() {
					let form = {};
					if (this.form.create_at) {
						// if(this.form.create_at[0]==this.form.create_at[1]){
						// 	this.form.create_at[1] += 60*60*24*1000;
						// }
						form.create_start_time = this.form.create_at[0] / 1000;
						form.create_end_time = this.form.create_at[1] / 1000;
					}
					for(let i in this.form){
						if(this.form[i]!='' && i!='create_at'){
							form[i] = this.form[i];
						}
					}
					if(form.company_name){
						delete form.company_name;
					}
					return form;
			},
		selectCustom(e){
			this.form.company_id = e.id;
			this.form.company_name = e.company_name;
		},
		// 搜索
		searchAction() {
            this.current.page = 1;
			this.getData();
		},
        reset() {
            this.form = {};
            this.getData();
        },
        changePage(page) {
            this.current.page = page;
            this.getData();
		},
		setColor(status){
			let color = '';
			switch(status){
				case 0: color = '#F56C6C'; break;
				case 1: color = '#118AB2'; break;
				case 2: color = '#AACD6E'; break;
				case 3: color = '#073B4C'; break;
				case 4: color = '#CCCCCC'; break;
				default: break;
			}
			return color;
		},
		// 分页
		changeLimit(pageSize) {
			this.current.per_page = pageSize;
			this.getData();
		},
	},
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";
.maincl {
	.el-select {
		width: 114px;
	}
	.more {
		margin-left: 50px;
	}
	.handle_btn {
		padding: 0;
		border: 0;
		&+.handle_btn{
		margin-left: 20px;
		}
		&.del{
		color:#f78989;
		}
	}
	.edit_dialog {
		.address {
			max-width: 350px;
		}
	}

	.mainor_form form {
		// width: calc(100% - 180px);
		width:100%;
	}

	.main_table /deep/.el-table--small td {
		padding: 10px 0;
	}
	.main_table /deep/.el-table--small th {
		padding: 10px 0;
	}

	/deep/.el-table {
		tr {
			&:hover {
				background: none !important;
			}
			&.hover-row > td {
				background: none !important;
			}
			.current-row > td {
				background: none !important;
			}
		}
	}
	/deep/.el-table .el-table__body tr:hover {
		background: #fff !important;
	}
	/deep/.el-table .el-table__body tr:hover > td {
		background: #fff !important;
	}
	/deep/.el-table tr.expanded + tr {
		background: #fafafa !important;
	}
	/deep/.el-table tr.expanded + tr > td {
		background: #fafafa !important;
	}
	/deep/.el-table tr.expanded + tr .mainex_ta {
		background: #fafafa !important;
	}
	/deep/.el-table tr.expanded + tr .mainex_ta th,
	/deep/.el-table tr.expanded + tr .mainex_ta tr {
		background: #fafafa !important;
	}
	/deep/.el-table tr.expanded + tr:hover {
		background: #fafafa !important;
	}
	/deep/.el-table tr.expanded + tr:hover > td {
		background: #fafafa !important;
	}
	/deep/.el-table tr.expanded + tr .el-table tr:hover {
		background: #fafafa !important;
	}
	/deep/.el-table tr.expanded + tr .el-table tr:hover > td {
		background: #fafafa !important;
	}
}
</style>
